<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <div class="aside-name">
          <img
            data-v-70338efb=""
            class="logo"
            src="../assets/logo.png"
            alt="welcome"
          />
          <div class="name">FanJiangtao</div>
        </div>
        <div class="aside-box">
          <el-scrollbar>
            <el-menu
              active-text-color="#0da7eb"
              router
              :default-active="$route.path"
            >
              <template v-for="subItem in menuList" :key="subItem.path">
                <el-sub-menu
                  v-if="subItem.children?.length"
                  :index="subItem.path"
                  :key="subItem.path"
                >
                  <template #title>
                    <el-icon>
                      <component :is="subItem.meta.icon"></component>
                    </el-icon>
                    <span>{{ subItem.meta.title }}</span>
                  </template>
                  <el-menu-item
                    v-for="item in subItem.children"
                    :key="item.path"
                    :index="item.path"
                  >
                    <template #title>
                      <el-icon>
                        <component :is="item.meta.icon"></component>
                      </el-icon>
                      <span>{{ item.meta.title }}</span>
                    </template>
                  </el-menu-item>
                </el-sub-menu>
                <el-menu-item v-else :index="subItem.path">
                  <template #title>
                    <el-icon>
                      <component :is="subItem.meta.icon"></component>
                    </el-icon>
                    <span>{{ subItem.meta.title }}</span>
                  </template>
                </el-menu-item>
              </template>
            </el-menu>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="header-lf">
            <div class="logo flx-center">
              <span class="logo-text">后台管理系统</span>
            </div>
          </div>
          <div class="header-lf">
            <div class="logo flx-center">
              <span class="logo-name">admin</span>
            </div>
            <el-popover ref="popoverRef" trigger="click">
              <template #reference>
                <img
                  class="login-icon"
                  src="../assets/image/avatar.jpg"
                  alt=""
                />
              </template>
              <div class="dasd" @click="logout">
                <el-icon class="icon"><SwitchButton /></el-icon>
                <span>退出</span>
              </div>
            </el-popover>
          </div>
        </el-header>
        <el-main :style="{ minHeight: clientHeight + 'px' }">
          <!-- <div class="home card">
                        <img data-v-70338efb="" class="home-bg" src="../assets/image/souye.jpg" alt="welcome">
                    </div> -->
          <div class="content-box">
            <router-view> </router-view>
          </div>
        </el-main>
        <div class="footer flx-center">
          <a href="" target="_blank">
            2023 © dsad-sdsasd By asdsa Technology.
          </a>
        </div>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { DefineComponent, computed } from "vue";
import { useRouter } from "vue-router";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
  setup() {
    const router = useRouter();
    console.log(router.getRoutes());
    const menuList = router.getRoutes().filter((v) => v.meta.isShow);

    const logout = () => {
      // 清除 Token
      sessionStorage.removeItem("token");
      // 重定向到登陆页
      router.replace("/login");
      ElMessage.success("退出登录成功！");
    };
    const clientHeight = document.body.clientHeight - 86;
    console.log("ssssssssssss", clientHeight);
    return {
      menuList,
      logout,
      clientHeight,
    };
  },
};
</script>

<style lang="scss" scoped>
:deep(.el-aside) {
  background-color: var(--el-menu-bg-color);
  border-right: 1px solid var(--el-border-color-light);
  overflow: hidden;
  box-sizing: border-box;
  color: #272727;
  flex-shrink: 0;
  .aside-name {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 55px;
    .logo {
      width: 30px;
      height: 30px;
    }
    .name {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
    }
  }
  .aside-box {
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: width 0.3s ease;
    .el-scrollbar {
      height: calc(100% - 55px);
      .el-menu {
        width: 100%;
        overflow-x: hidden;
        border-right: none;
      }
    }
    .logo {
      box-sizing: border-box;
      height: 55px;
      .logo-img {
        width: 28px;
        object-fit: contain;
        margin-right: 6px;
      }
      .logo-text {
        font-size: 21.5px;
        font-weight: bold;
        color: var(--el-logo-text-color);
        white-space: nowrap;
      }
    }
  }
}
::v-deep .el-menu-item {
  color: black;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
}
::v-deep .el-sub-menu__title {
  color: black;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
}

::v-deep .el-menu-item.is-active {
  color: #0da7eb !important;
  background-color: #c4e3f6 !important;
}
// .el-menu-item.is-active::after {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     width: 4px;
//     content: "";
//     background-color: #0da7eb;
// }
.el-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 55px;
  padding: 0 15px;
  background-color: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  .header-lf {
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    .logo-text {
      font-size: 21.5px;
      font-weight: bold;
      color: black;
      white-space: nowrap;
    }
    .login-icon {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
    .logo-name {
      font-size: 18px;
      font-weight: bold;
      margin: 0 20px;
      color: black;
      white-space: nowrap;
    }
  }
}
.footer {
  height: 30px;
  background-color: #fff;
  border-top: 1px solid #d2dae3;
  a {
    font-size: 14px;
    color: var(--el-text-color-secondary);
    text-decoration: none;
    letter-spacing: 0.5px;
  }
}
.flx-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.dasd {
  display: flex;
  align-items: center;
  white-space: nowrap;
  list-style: none;
  // padding: 5px 8px;
  margin: 0;
  font-size: 14px;
  color: #606266;
  cursor: pointer;
  outline: 0;
  .icon {
    margin-right: 5px;
  }
}
// .el-menu-item.is-active:before {
//     position: absolute;
//     top: 0;
//     bottom: 0;
//     width: 4px;
//     content: "";
//     background-color: #0da7eb;
// }
</style>
